<template>
    <div v-for="(item, index) in list" :key="index">
        id: {{ index }} --- Direction: {{ item.direction }}
    </div>
</template>

<script setup>
    import {reactive} from 'vue';
    const list = reactive([
        {id: 1, direction: 'East'}, {id: 2, direction: 'West'},
        {id: 3, direction: 'South'}, {id: 4, direction: 'North'}
    ])
</script>